import formula from '@/constant/formula.json'
import color from 'css-color-function'
import rgbHex from 'rgb-hex'
import axios from 'axios'

export const writeStyle = cssText => {
  const style = document.createElement('style')
  style.className = 'reset-style'
  const oldStyle = document.querySelector(style.className)
  style.innerHTML = cssText
  document.head.appendChild(style)
  if (oldStyle) {
    oldStyle.remove()
  }
}
/**
 * 根据主题色，生成最新的样式表
 * @param {*} primaryColor 主题色
 */
export const generateNewStyle = async primaryColor => {
  // 1、根据主题色生成色值表
  const colors = generateColors(primaryColor)
  // 2、获取当前element-plus的默认样式表，并把需要进行替换的色值打上标记
  let cssText = await getOriginalStyle()
  // 3、遍历生成的色值表，在默认样式表进行全局替换
  // const matchStr = Object.keys(colors).map(key => `(${key})`).join('|')
  // console.log('(?<=:\\s{0,})' + matchStr + '(?=;)')
  // return cssText.replace(new RegExp('(?<=:\\s{0,})' + matchStr + '(?=;)', 'g'), (match) => {
  //   return colors[match]
  // })
  Object.entries(colors).forEach(([key, value]) => {
    cssText = cssText.replace(new RegExp('(:|\\s+)' + key, 'g'), (match, p1) => {
      return p1 + value
    })
  })
  return cssText
}

/**
 * 通过parimary主题色和色值表，生成主题色的色值表
 * @param {*} parimary 主题色
 * @returns 主题色的色值表,如：
 * {
    "shade-1": "#f632de",
    "light-1": "#63dea5",
    ...
  }
 */
const generateColors = primary => {
  if (!primary) return
  const colors = {
    primary
  }
  Object.entries(formula).forEach(([key, value]) => {
    // 替换之后的函数，如："color(#ff0000 tint(50%))"
    const value1 = value.replace(/primary/g, primary)
    // 将上面的函数转化为 rgba颜色，如：rgb(255, 128, 128)"
    const rgbaColor = color.convert(value1)
    // 将rgba颜色转化为16进制颜色
    const hexColor = '#' + rgbHex(rgbaColor)
    colors[key] = hexColor
  })
  return colors
}

/**
 * 从远程获取要修改的库的默认默认样式
 * @returns 打完标记的默认库的样式
 */
const getOriginalStyle = async () => {
  const version = require('element-plus/package.json').version
  // const url = `https://cdn.bootcdn.net/ajax/libs/element-plus/${version}/theme-chalk/index.css`
  const url = `http://unpkg.com/element-plus@${version}/lib/theme-chalk/index.css`
  const { data } = await axios.get(url)
  return getStyleTemplate(data)
}

/**
 * 获取打完标记的默认库的样式
 * @param {*} data 要修改的库的默认默认样式
 * @returns 打完标记的默认库的样式
 */
const getStyleTemplate = data => {
  // element-plus 默认色
  const colorMap = {
    '#3a8ee6': 'shade-1',
    '#409eff': 'primary',
    '#53a8ff': 'light-1',
    '#66b1ff': 'light-2',
    '#79bbff': 'light-3',
    '#8cc5ff': 'light-4',
    '#a0cfff': 'light-5',
    '#b3d8ff': 'light-6',
    '#c6e2ff': 'light-7',
    '#d9ecff': 'light-8',
    '#ecf5ff': 'light-9'
  }
  const matchStr = Object.keys(colorMap).map(key => `(${key})`).join('|')
  return data.replace(new RegExp(matchStr, 'ig'), (match) => {
    return colorMap[match]
  })
}
